<template>
  <el-date-picker size="small" :type="type" v-model="valueModel"
                  range-separator="至" :start-placeholder="placeholders[0]" :end-placeholder="placeholders[1]"
                  :pickerOptions="pickerOptions" clearable></el-date-picker>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";

/**
 * 日期范围选择
 */
export default {
    name: "SeaDateRange"
    , components: {}

    , props: {
        value: {type: Array, default: undefined}
        // 类型，默认输入框
        , type: {type: String, default: 'daterange'}
        // 文字提示
        , placeholder: {type: [String, Array], default: () => ['开始', '结束']}
        // 原生的参数设置
        , options: {type: Object, default: Layers.object}
        // 原生的快捷键设置
        , shortcuts: {type: [Array, Boolean], default: undefined}
    }, model: {
        //需要定义哪一个props可以用v-model绑定属性
        prop: 'value',
        //声明一个事件，调用之后，就会改变父级容器的值
        event: 'handlerValueChange'
    }, computed: {
        valueModel: {
            get: function () {
                //实际使用的是value值
                return this.value;
            },
            set: function (val) {
                //侦听到setter()事件，将值传递回父级组件
                this.$emit('handlerValueChange', val);
                this.$emit('change', val);
            }
        }
    }
    , data() {
        return {
            // 原生的参数设置
            pickerOptions: undefined
            // 提示性语句
            , placeholders: undefined
        }
    }
    , created() {
        // 提示性语句
        let holder = this.placeholder;
        if (Layers.isString(holder)) {
            this.placeholders = holder.split(',');
        } else {
            this.placeholders = holder;
        }

        // 设置快捷键
        if (this.shortcuts !== undefined) {
            let st = this.shortcuts;
            if (Layers.isBoolean(st)) {
                st = this.getDefaultShortcuts();
            }
            this.options.shortcuts = st;
        }
        this.pickerOptions = this.options;
    }
    , methods: {
        /**
         * 默认的快捷键设置
         *
         * 31 号计算近 3 个月会有一定问题，不过用户可以手动调整，暂不考虑解决此问题。
         * @return {[]}
         */
        getDefaultShortcuts() {
            return [
                {
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        let time = start.getTime() - 3600 * 1000 * 24
                        start.setTime(time);
                        end.setTime(time);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 1);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 3);
                        picker.$emit('pick', [start, end]);
                    }
                }
            ]
        }
    }
}
</script>
